<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情页</title>
    <link rel="stylesheet" href="css/xiangqing.css">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="js/jquery1.11.js"></script>
</head>

<body>
    <div id="banner">
        <a href="">
            <img src="img/0.jpg" alt="">
        </a>
    </div>
    <div id="nav-wrap">
        <div id="nav">
            <img class="img1" src="img/home.png" alt="">
            <a href="shouye.html">第五大道首页</a>
            <img class="img2" src="img/phone.png" alt="">
            <p>贵宾专线：4008-6767-38</p>
            <ul>
                <li class="li1"><a href="denglu.html">登录</a></li>
                <li> <img src="img/youli.gif" alt=""><a href="zhuce.html">注册</a></li>
                <li><a href="">我的第五大道</a></li>
                <li><a href="">帮助中心</a></li>
                <li><a href="">手机版下载</a></li>
            </ul>
        </div>
    </div>
    <div id="search-wrap">
        <div id="search">
            <a href="shouye.html"> <img class="img1" src="img/wudadaologo.jpg" alt=""></a>
            <img class="img2" src="img/yijian.jpg" alt="">
            <div id="search-mid">
                <div id="search-mid-top">
                    <input class="search-btn1" type="text" placeholder="太阳镜">
                    <input class="search-btn2" type="button" value="搜&nbsp;索">
                </div>
                <ul>
                    <li class="li1">连衣裙</li>
                    <li>美妆</li>
                    <li>运动户外</li>
                    <li>箱包</li>
                    <li>配饰</li>
                    <li>腕表</li>
                </ul>
            </div>
            <div id="search-right">
                <img class="img3" src="img/hua.png" alt="">
                <p>第五大道海外生活</p>
            </div>
        </div>
    </div>
    <div id="meun-wrap">
        <div id="meun">
            <div class="li1"><a href="liebiao.html">商品分类</a></div>
            <ul>
                <li><a href="">品牌</a></li>
                <li><a href="">最新</a></li>
                <li><a href="">女士</a></li>
                <li><a href="">男士</a></li>
                <li><a href="">生活馆</a></li>
                <li><a href="">海外馆</a></li>
                <li><a href="">时尚</a></li>
                <li><a href="">特惠</a></li>
                <li><a href="">礼品区</a></li>
                <li class="li2"><a href=""><img src="img/logo0.png" alt=""><span>到店</span></a></li>
                <li class="li3"><a href=""><img src="img/overseaslogo.gif" alt=""></a></li>
                <li class="li4"><a href=""><img src="img/logo1.png" alt=""></a></li>
                <li class="li5"><a href=""><img src="img/logo2.png" alt=""></a></li>
                <li class="li6"><a href=""><img src="img/logo3.png" alt=""></a></li>
            </ul>
        </div>
    </div>
    <div id="detail-wrap">
        <div id="detail">
            <div id="zoomBox">

            </div>
            <div class="concent">

            </div>
        </div>
    </div>

    <script>
        function loadData() {
            let pagenum = 0;
            let pagesize = 20;
            let url = 'http://jx.xuzhixiang.top/ap/api/detail.php'
            let uid = localStorage.getItem('uid')
            let token = localStorage.getItem('token')
            let s = new URLSearchParams(location.search)

            axios.get(url, {
                params: {
                    id: s.get("id"),
                    uid
                }
            }).then(res => {
                console.log(res);
                // 商品数组
                let arr = res.data.data;
                // console.log(arr);
                let h_left = "";
                let h_right = "";

                h_left = 
                `<div id="midArea">
                    <img src="${arr.pimg}" alt="">
                <div id="zoom"></div>
                </div>
                <div id="bigArea">
                    <img src="${arr.pimg}" alt="">
                </div>
                <div id="smallArea"></div>`

                h_right = `
                <p class="p1">${arr.pname}</p>
                <p class="p2">${arr.pdesc}</p>
                <p class="p3">货号: 5Lux2228354g_p7263438</p>
                <p class="p4">￥${arr.pprice}<span class="span1">红卡会员价</span></p>
                <p class="p5">大小 <span class="span2">TU</span></p>
                <p class="p6">颜色 <span class="span3">black</span></p>
                <div class="box1">数量:</div>
                <div class="box2">
                    <input type="button" id="btn1" value="-">
                    <input type="text" id="btn2" value="1">
                    <input type="button" id="btn3" value="+">
                </div>
                <div class="box3">
                    <input type="button" id="btn4" value="立即购买">
                </div>
                <div class="box4">
                    <input type="button" id="btn5" value="加入购物袋">
                </div>`

                $("#detail").find("#zoomBox").html(h_left);
                $("#detail").find(".concent").html(h_right);

                $("#zoomBox").mouseover(function(){
                    $("#bigArea").show();
                    $(zoom).show();
                })
                $("#zoomBox").mouseout(function(){
                    $("#bigArea").hide();
                    $(zoom).hide();
                })
                
            let zoomBox=document.getElementById("zoomBox");
            let zoom=document.getElementById("zoom");
            let bigArea=document.getElementById("bigArea");
            let midArea=document.getElementById("midArea");
            let smallArea=document.getElementById("smallArea");
            let bigImg=bigArea.children[0];
            zoomBox.onmousemove = (e) => {
            let evt = e || window.event;
            let x = evt.pageX - zoomBox.offsetLeft - zoom.offsetWidth / 2;
            let y = evt.pageY - zoomBox.offsetTop - zoom.offsetHeight / 2;

            let mx = zoomBox.offsetWidth - zoom.offsetWidth;
            let my = zoomBox.offsetHeight - zoom.offsetHeight;

            x = x <= 0 ? 0 : x >= mx ? mx : x;
            y = y <= 0 ? 0 : y >= my ? my : y;

            zoom.style.left = x + "px";
            zoom.style.top = y + "px";

            //大图移动
            bigImg.style.left = -zoom.offsetLeft * (bigImg.offsetWidth / midArea.offsetWidth) + "px";
            bigImg.style.top = -zoom.offsetTop * (bigImg.offsetHeight / midArea.offsetHeight) + "px";

        }
        $(".box4").find("#btn5").click(function () {
               console.log("1");
                addCart();
            })

            })
        }
        loadData();
           //添加购物车
           function addCart() {
            let url = `http://jx.xuzhixiang.top/ap/api/add-product.php`;
            var s = new URLSearchParams(location.search);

            axios.get(url, {
                params: {
                    pid: s.get("id"),
                    pnum: 1,
                    uid:"45121"
                }
            }).then(res => {
              console.log(res)
                location.href = `gouwuche.html?id=${s.get("id")}`;
            }) 
           
        } 
        
    </script>

    <div class="bottom">
        <ul>
            <li>
                <img src="img/9.jpg" alt="">
                <div>
                    <p class="P1">正品保障</p>
                    <p class="P2">品牌授权，官方验真</p>
                </div>
            </li>
            <li>
                <img src="img/10.jpg" alt="">
                <div>
                    <p class="P1">专柜发货</p>
                    <p class="P2">专柜直接或到店自提</p>
                </div>
            </li>
            <li>
                <img src="img/11.jpg" alt="">
                <div>
                    <p class="P1">无忧售后</p>
                    <p class="P2">7天无理由退换货</p>
                </div>
            </li>
            <li>
                <img src="img/12.jpg" alt="">
                <div>
                    <p class="P1">VIP服务</p>
                    <p class="P2">享品牌会员售前售后服务</p>
                </div>
            </li>
            <li>
                <img src="img/13.jpg" alt="">
                <div>
                    <p class="P1">权威荣誉</p>
                    <p class="P2">商务部授予诚信示范企业</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="footer">
        <ul>
            <li class="li0">
                <span class="span1">服务保障</span>
                <span>品牌授权正品</span>
                <span>品牌客服</span>
                <span>预约到店体验</span>
                <span>7天无理由退换</span>
            </li>
            <li>
                <span class="span1">使用帮助</span>
                <span>品牌授权正品</span>
                <span>品牌客服</span>
                <span>预约到店体验</span>
                <span>7天无理由退换</span>
            </li>
            <li>
                <span class="span1">支付方式</span>
                <span>品牌授权正品</span>
                <span>品牌客服</span>
                <span>预约到店体验</span>
                <span>7天无理由退换</span>
                <span>分期付款</span>
            </li>
            <li>
                <span class="span1">配送方式</span>
                <span>品牌授权正品</span>
                <span>品牌客服</span>
                <span>预约到店体验</span>
                <span>7天无理由退换</span>
            </li>
            <li>
                <span class="span1">售后服务</span>
                <span>品牌授权正品</span>
                <span>品牌客服</span>
                <span>预约到店体验</span>
                <span>7天无理由退换</span>
            </li>
            <li class="li1">
                <span class="span1">第五大道APP</span>
                <img src="img/14.jpg" alt="">
            </li>
            <li class="li2">
                <span class="span1">第五大道微博</span>
                <img src="img/14.jpg" alt="">
            </li>
        </ul>
    </div>
    <div class="copy">
        <div class="copy-1">
            <ul>
                <li><a href="">箱包</a></li>
                <li><a href="">美妆</a></li>
                <li><a href="">服饰</a></li>
                <li><a href="">腕表</a></li>
                <li><a href="">配饰</a></li>
                <li><a href="">鞋靴</a></li>
                <li><a href="">特惠</a></li>
                <li class="LI"><a href="">礼品区</a></li>
            </ul>
        </div>
        <div class="copy-2">
            <ul>
                <li>关于第五大道</li>
                <li>网站地图</li>
                <li>品牌合作专区</li>
                <li>媒体聚焦</li>
                <li>商务合作</li>
                <li>商家合作</li>
                <li>加入第五大道</li>
                <li>友情链接</li>
                <li>奢尚志</li>
                <li>联系我们</li>
                <li>投诉建议</li>
            </ul>
        </div>
        <div class="copy-3">
            <p>Copyright © 2008-2014 瑞美嘉信国际信息技术（北京）有限公司 版权所有京ICP备09012701号 京公网安备 11010102003747号 丨营业执照</p>
        </div>
    </div>
    <div id="up">
        <div id="bigbox1">
            <img src="img/foot.png" alt="">
            <div id="bigbox"></div>
        </div>
    </div>
    <script>
        var a = document.querySelector("#bigbox");
        var b = document.querySelector("#up");
        a.onclick = function () {
            b.style.display = "none";
        }
    </script>
    <div class="right">
        <ul>
            <li><a href="gouwuche.html"><img src="img/gouwu.png" alt=""></a></li>
            <li><img src="img/ka.png" alt=""></li>
            <li><img src="img/xin.png" alt=""></li>
            <li><img src="img/kefu.png" alt=""></li>
            <li class="li4"><img src="img/weixin.png" alt=""></li>
            <li><img src="img/bi.png" alt=""></li>
            <li><img src="img/dianhua.png" alt=""></li>
            <li id="puttop"><img src="img/top.png" alt=""></li>
        </ul>
    </div>
    <script>
        var puttop = document.querySelector("#puttop");
        puttop.onclick = function () {
            document.documentElement.scrollTop = document.body.scrollTop = 0;
        }
    </script>
</body>

</html>